<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="app" style="width:100vw;height:200vh">{{message}}</div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script src="../dist/contextmenu.umd.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          message: "右键打开菜单"
        };
      },
      mounted() {
        document.querySelector("#app").oncontextmenu = event => {
          this.$contextmenu({
            items: [
              {
                label: "返回(B)",
                onClick: () => {
                  this.message = "返回(B)";
                  console.log("返回(B)");
                }
              },
              { label: "前进(F)", disabled: true },
              { label: "重新加载(R)", divided: true, icon: "el-icon-refresh" },
              { label: "另存为(A)..." },
              { label: "打印(P)...", icon: "el-icon-printer" },
              { label: "投射(C)...", divided: true },
              {
                label: "使用网页翻译(T)",
                divided: true,
                minWidth: 0,
                children: [{ label: "翻译成简体中文" }, { label: "翻译成繁体中文" }]
              },
              {
                label: "截取网页(R)",
                minWidth: 0,
                children: [
                  {
                    label: "返回(B)",
                    onClick: () => {
                      this.message = "返回(B)";
                      console.log("返回(B)");
                    }
                  },
                  { label: "前进(F)", disabled: true },
                  { label: "重新加载(R)", divided: true, icon: "el-icon-refresh" },
                  { label: "另存为(A)..." },
                  { label: "打印(P)...", icon: "el-icon-printer" },
                  { label: "投射(C)...", divided: true },
                  {
                    label: "使用网页翻译(T)",
                    divided: true,
                    minWidth: 0,
                    children: [
                      { label: "翻译成简体中文" },
                      { label: "翻译成繁体中文" }
                    ]
                  },
                  {
                    label: "截取网页(R)",
                    minWidth: 0,
                    children: [
                      {
                        label: "截取可视化区域",
                        onClick: () => {
                          this.message = "截取可视化区域";
                          console.log("截取可视化区域");
                        }
                      },
                      { label: "截取全屏" }
                    ]
                  },
                  { label: "查看网页源代码(V)", icon: "el-icon-view" },
                  { label: "检查(N)" }
                ]
              },
              { label: "查看网页源代码(V)", icon: "el-icon-view" },
              { label: "检查(N)" }
            ],
            event,
            customClass: "class-a",
            zIndex: 3,
            minWidth: 230
          });
          return false;
        };
      }
    })
  </script>
</body>

</html>